<template>
  <div class="container">
    <div class="ellipse">
      <div class="flex-space">
        <span>日期: {{date}}</span>
        <span>打卡员工: {{cardnum}}人</span>
      </div>
      <div class="flex-space" v-if="worknum">
        <span>今日出勤: {{worknum}}人</span>
        <span>出勤率: {{workper}}%</span>
      </div>
      <div class="flex-space" v-else>
        <span>没有出勤数据!</span>
      </div>
      <view class="data_section">
        <picker
          mode="date"
          :value="date"
          start="2000-01-01"
          end="2066-09-01"
          @change="bindDateChange"
        >
          <view class="picker">{{date}}</view>
        </picker>
        <span class="bottom_arrow"></span>
      </view>
    </div>
    <scroll-view :scroll-y="true" :style="{height: scrollHeight +'px'}">
      <ul class="attend_ul">
        <li class="flex" v-for="item in attendanceList" :key="item.id" @tap="goto_user(item.id)" v-if="item.isdisable === 0">
          <div class="attend_left flex-item">
            <span class="name_pic">
              <img :src="item.headurl || '/static/imgs/system_user.png'" alt>
            </span>
            <div class="attend_details flex-item">
              <span class="name">{{item.name}}</span>  
              <span
                class="time_words"
                v-if="item.type != 9"
              >签到时间：{{item.time_start ==0 ? '未签到' : item.time_start}}</span>
              <span class="time_words" v-else>签到时间：未签到</span>
              <span
                class="time_words"
                v-if="item.type == 4"
              >签退时间：{{item.time_end == 0 ? '未签退' : item.time_end}}</span>
              <span class="time_words" v-else>签退时间：未签退</span>
            </div>
          </div>
          <div class="attend_status flex" v-if="item.type == 0">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#a2a1a1">缺勤</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 1">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fc97af">出勤</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 2">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#96dee8">请假</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 3">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#72ccff">休息</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 4">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fc97af">出勤</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 5">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fbc171">调休</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 6">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#04ee67">加班</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 7">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#04ee67">加班</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
          <div class="attend_status flex" v-if="item.type == 9">
            <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#a2a1a1">未打卡</div>
            <div
              v-if="item.shenhe == 0"
              class="attend_right flex-item"
              style="background-color:#ea78aa"
            >未审核</div>
            <div v-else class="attend_right flex-item cur">已审核</div>
          </div>
        </li>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
export default {
  data () {
    return {
      date: '',
      attendanceList: [],
      warnmsg: '',
      scrollHeight: 0,
      cardnum: 0,
      worknum: 0,
      workper: 0
    }
  },
  components: {
  },
  async onLoad () {
    let that = this
    await Promise.all([
      that.gettoday(),
      that.getswiperheight(),
      that.getuserkaoqinlist()
    ])
  },
  methods: {
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        that.scrollHeight = res.windowHeight - 130
      } catch (e) {
        console.log(e)
      }
    },
    async gettoday () {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const time = year + '-' + month + '-' + day
      this.date = time
    },
    async getuserkaoqinlist () {
      let that = this
      const userInfo = wx.getStorageSync('userInfo')
      const startTimejs = moment(that.date, 'YYYY-MM-DD').unix()
      const endTimejs = startTimejs + 86400
      const datatype = that.$route.query.datatype
      const jsonshop = that.$route.query.jsonshop
      let paramObj = {
        jsonshop: jsonshop,
        floor: userInfo.floor,
        departmentid: userInfo.departmentid,
        start_time_js: startTimejs,
        end_time_js: endTimejs,
        datatype: datatype
      }
      let res = await api.gettodaywork(paramObj)
      if (res.code === '100') {
        let worknum = 0
        let cardnum = 0
        res.data.forEach(item => {
          if (item.time_end != 0) {// eslint-disable-line
            item.time_end = moment.unix(item.time_end).format('HH:mm:ss A')
          }
          if (item.time_start != 0) {// eslint-disable-line
            item.time_start = moment.unix(item.time_start).format('HH:mm:ss A')
          }
          if (item.type == 1 || item.type == 4 || item.type == 6 || item.type == 7) {// eslint-disable-line
            worknum++
          }
          if (item.type != 9) { // eslint-disable-line
            cardnum++
          }
        })
        that.attendanceList = res.data
        that.cardnum = cardnum
        that.worknum = worknum
        that.workper = (worknum / res.data.length * 100).toFixed(0)
      } else {
        that.attendanceList = ''
        that.warnmsg = '没有员工数据，请添加数据！'
      }
    },
    bindDateChange (e) {
      let startTimejs = moment(e.mp.detail.value, 'YYYY-MM-DD').unix();
      if (startTimejs > Math.round(Date.now() / 1000)) {
        Toast('不能选择大于今天的时间', 'noicon');
        return false;
      }
      this.date = e.mp.detail.value;
      this.getuserkaoqinlist();
    },
    goto_user (id) {
      wx.setStorageSync('params_userid', id)
      this.$router.push({ path: '/pages/worker/checkEmployees/checkEmployees' })
    }
  }
}
</script>

<style scoped>
.container {
  background: #fff !important;
}
.ellipse {
  position: relative;
  width: 100%;
  height: 260rpx;
  padding: 0 76rpx;
  background: url(http://mytimg.178mr.com/ellipse.png) 50% 100%/150% no-repeat;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
.data_section {
  position: absolute;
  left: 50%;
  margin-left: -126rpx;
  bottom: 10rpx;
  width: 252rpx;
  padding-right: 36rpx;
  border-radius: 32rpx;
  line-height: 60rpx;
  text-align: center;
  box-sizing: border-box;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 1);
  box-shadow: 0 2rpx 10rpx rgba(255, 68, 68, 0.2);
}
.bottom_arrow {
  position: absolute;
  right: 36rpx;
  top: 22rpx;
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/arrow_black.png) no-repeat;
  background-size: 100%;
}
.attend_ul {
  width: 100%;
}
.attend_ul li {
  width: 100%;
  padding: 27rpx 30rpx 13rpx 32rpx;
  position: relative;
}
.attend_ul li::after {
  position: absolute;
  content: "";
  width: 95%;
  left: 33rpx;
  bottom: 0;
  height: 2rpx;
  background: RGBA(153, 153, 153, 0.1);
}
.attend_ul li .attend_left {
  display: flex;
}
.attend_ul li .attend_left .name_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  /* border: 4rpx solid #ff4444; */
}
.attend_ul li .attend_left .name_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.attend_ul li .attend_left .attend_details {
  margin-left: 20rpx;
}
.attend_ul li .attend_left .attend_details span {
  display: block;
}
.attend_ul li .attend_left .attend_details .name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 52rpx;
  color: rgba(51, 51, 51, 1);
}
.attend_ul li .attend_left .attend_details .time_words {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: rgba(153, 153, 153, 1);
}
.attend_ul li .attend_right {
  width: 104rpx;
  height: 40rpx;
  background: RGBA(153, 153, 153, 0.5);
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius: 24rpx;
  box-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
  margin-right: 10rpx;
}
.attend_ul li .attend_right:last-child {
  margin-right: 0;
}
.attend_ul li .attend_right.cur {
  background: #ff4444;
}
.picker {
  font-size: 14px;
}
.flex-space {
  padding-top: 26rpx;
  display: flex;
  justify-content: space-between;
}
</style>

